<template>
  <a-modal
    width="656px"
    v-model:visible="visible"
    :mask-closable="false"
    title="挪车二维码"
    @cancel="close"
    @close="close"
    :bodyStyle="{ padding: 0 }"
    unmount-on-close
    class="qrcode"
  >
    <a-alert class="top">
      <template #icon>
        <icon-exclamation-circle-fill />
      </template>
      <div
        >当前车辆没有订单且需要挪车时，扫码会展示归属门店的联系人电话，请及时完善。
        <span style="color: rgb(var(--primary-6)); cursor: pointer" @click="goTo('/merchant/store', 'svms:merchant:store')">去完善 ></span>
      </div>
    </a-alert>
    <div class="content">
      <!-- 挪车二维码联系人 -->
      <div class="qrcode-link-wrapper">
        <div class="qrcode-link-title">
          <div class="title-text">扫码后展示联系电话为</div>
          <a-button v-if="changeLinkTypeFlag" :loading="linkTypeSaving" size="mini" type="primary" @click="saveLinkType">保存</a-button>
          <a-button v-else size="mini" disabled type="dashed">保存</a-button>
        </div>
        <div class="qrcode-link-content">
          <a-radio-group v-model="form.linkType" @change="changeLinkTypeFn">
            <a-radio :value="item.value" v-for="item in dict.qrCodeLinkTypeEnums" :key="item.value">
              {{ item.label }}
            </a-radio>
          </a-radio-group>
        </div>
      </div>
      <a-divider margin="20" />
      <div class="qrcode-wrapper flex-row">
        <div class="modal-body" id="downImg">
          <div class="code">
            <qrcode-vue :value="form?.qrCode" :size="85" level="H" class="mb-5" />
          </div>
          <div class="title flex-row" v-if="form.licenseNo">{{ form.licenseNo }}</div>
          <img src="../../../../../assets/qrcode-bg-3.png" alt="" v-if="form.licenseNo" />
          <img src="../../../../../assets/qrcode-bg-2.png" alt="" v-else />
        </div>
      </div>
    </div>
    <template #footer>
      <a-button @click="close">关闭</a-button>
      <a-button type="primary" @click="saveImg"> 下载 </a-button>
    </template>
  </a-modal>
</template>

<script setup>
  import { ref } from 'vue'
  import QrcodeVue from 'qrcode.vue'
  import html2canvas from 'html2canvas'
  import { getTenantQrCode, getCarQrCode } from '@/api/asset/car'
  import { usePermission } from '@/hooks/usePermission'
  import { useRouter } from 'vue-router'
  import { Message } from '@arco-design/web-vue'
  import { usePageDict } from '@/hooks/useDict'
  const dict = usePageDict('carManageDict')

  const router = useRouter()
  const visible = ref(false)
  const form = ref({})

  const open = (data) => {
    visible.value = true
    form.value = {}
    if (data) {
      // 车辆id和车牌号
      form.value.carId = data?.id
      form.value.licenseNo = data.licenseNo
    }
    fetchAndSave().then((res) => {
      form.value.qrCode = res.result.qrCode
      form.value.linkType = res.result.linkType
    })
  }
  /**
   * 调用接口
   * @param queryParam 查询参数
   */
  const fetchAndSave = (queryParam = {}) => {
    let fetch = getTenantQrCode
    if (form.value.carId) {
      fetch = getCarQrCode
    }
    const param = {
      carId: form.value?.carId,
      ...queryParam,
    }
    return fetch(param)
  }

  // 改变联系人类型
  const changeLinkTypeFlag = ref(false)
  const linkTypeSaving = ref(false)
  const changeLinkTypeFn = () => {
    changeLinkTypeFlag.value = true
  }
  // 保存联系人类型
  const saveLinkType = () => {
    linkTypeSaving.value = true
    fetchAndSave({ linkType: form.value.linkType })
      .then(() => {
        changeLinkTypeFlag.value = false
        Message.success('保存成功')
      })
      .finally(() => {
        linkTypeSaving.value = false
      })
  }

  const close = () => {
    form.value = {}
    visible.value = false
    changeLinkTypeFlag.value = false
  }
  const saveImg = () => {
    html2canvas(document.querySelector('#downImg'), {
      useCORS: true,
      scale: 3,
      dpi: 500,
    }).then((canvas) => {
      let dataURL = canvas.toDataURL('image/png')
      var addElement = document.createElement('a')
      addElement.href = dataURL
      addElement.download = form.value.licenseNo ? `挪车二维码-${form.value.licenseNo}.png` : '挪车二维码.png'

      document.body.appendChild(addElement)
      addElement.click()
      document.body.removeChild(addElement)
    })
  }

  const goTo = (url, permission) => {
    if (url) {
      if (usePermission(permission)) {
        close()
        router.push({ path: url })
      } else {
        Message.warning(`您没有门店管理权限，请先联系管理员分配权限后操作`)
      }
    }
  }

  defineExpose({
    open,
    close,
  })
</script>

<style lang="less" scoped>
  .qrcode {
    position: relative;
    .flex-row {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .content {
      padding: 20px;
      .qrcode-link-wrapper {
        .qrcode-link-title {
          font-weight: 600;
          font-size: 16px;
          color: #1d2129;
          line-height: 24px;
          margin-bottom: 11px;
          display: flex;
          justify-content: space-between;
          .arco-btn {
            width: 56px;
          }
        }
        .qrcode-link-content {
          .arco-radio {
            margin-right: 0;
            padding-left: 0;
          }
          .arco-radio:first-of-type {
            margin-right: 24px;
          }
        }
      }
    }
    .qrcode-wrapper {
      background: #f7f8fa;
      width: 100%;
      height: 324px;
      .modal-body {
        position: relative;
        width: 251px;
        height: 287px;
        .code {
          position: absolute;
          top: 112px;
          right: 83px;
        }
        .title {
          position: absolute;
          bottom: 26px;
          left: 40px;
          width: 170px;
          height: 27px;
          background: rgba(253, 135, 20, 0.14);
          border-radius: 4px 4px 4px 4px;
          font-weight: 600;
          font-size: 18px;
          color: #fd8714;
        }
      }
    }
  }
</style>
